<template>
<div>
  <div class="tabNav">
   <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/settlement.png" />个体工商户发票管理</b>
  </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd table-drop" shadow="hover">
                <div class="search">
                  <el-input v-model="input" placeholder="企业名称"></el-input>
                  <!-- <el-select v-model="value2" placeholder="最近三个月">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select> -->
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    range-separator="~">
                 </el-date-picker>
                  <el-select v-model="value" placeholder="全部">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button type="primary" @click="search()">查询</el-button>
                </div>
                <transition name="el-zoom-in-top">
                  <div
                    class="download"
                    v-show="checkboxSelect > 0"
                    style="margin-top: 0"
                  >
                    <i class="el-icon-info"></i>
                    共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
                    >项
                    <span @click="invoiceDownload">下载</span>
                    <em @click="cleanSelection">清空</em>
                  </div>
                </transition>
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                @selectionChange="downloadWhether"
                ref="multipleTable"
                @sort-change="sortChange"
                >
                <!-- <el-table-column type="selection" width="45"> </el-table-column> -->
                <el-table-column prop="billedBody" sortable="custom" align="center" label="开票主体"> </el-table-column>
                <el-table-column
                    prop="billType"
                    align="center"
                    label="发票类型"
                >
                  <template #default="item">
                    {{ billType[item.row.billType] }}
                    </template>
                </el-table-column>
                <el-table-column prop="billAmount" sortable="custom" align="center" label="开票金额">
                </el-table-column>
                <el-table-column prop="createTime" sortable="custom" align="center" label="创建时间" width="200">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="taskNumber" align="center" label="关联任务数量" width="120">
                  <template #default="item">
                    <el-button type="text" @click="getQueryTaskByParam(item.row)">{{item.row.taskNumber}}</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="isUploadBill" align="center" label="是否上传发票">
                    <template #default="item">
                      {{ isUploadBill[item.row.isUploadBill] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="140"
                    class-name="editor"
                >
                  <template #default="item">
                    <template v-if="item.row.isUploadBill == 0">-</template>
                    <el-button v-else type="text" @click="openUrl(item.row.billUrl)">查看</el-button>
                  </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog
      title="关联任务"
      custom-class="task-dialog"
      v-model="taskDelShow"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table
          :data="queryTaskByParam"
          @selectionChange="taskDelShow"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="任务ID" width=""> </el-table-column>
          <el-table-column prop="businessName" label="企业名称" width="">
          </el-table-column>
          <el-table-column prop="name" label="任务名称" width="">
          </el-table-column>
          <el-table-column prop="taskPayment" label="实际服务款" width="">
          </el-table-column>
          <el-table-column prop="releaseDate" label="任务开始时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd', new Date(item.row.releaseDate)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endDate" label="任务结束时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd', new Date(item.row.endDate)) }}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="任务创建时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskDelShow = false">取 消</el-button>
          <el-button type="primary" @click="taskDelShow = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
</div>  
</template>
<script>
export default {
  data() {
    return {
        orderByZH: false,
        orderByAsc: false,
        orderByColume: 'createTime',
        isUploadBill: {
          1: "已上传",
          0: "未上传",
        },
        billType: {
          1: "专项增值税发票",
          2: "普通增值税发票",
        },
        taskDelShow: false,
        options1: [{
          value: '0',
          label: '全部'
        },{
          value: '1',
          label: '最近三个月'
        }, {
          value: '2',
          label: '最近半年'
        }, {
          value: '3',
          label: '最近一年'
        }],
        options: [{
          value: '',
          label: '全部'
        },{
          value: '0',
          label: '未上传'
        }, {
          value: '1',
          label: '已上传'
        }],
        value: '',
        value1: '',
        value2: '',
        input: '',
      tableData: [],
      queryTaskByParam: [],
      bill_status: '',
      startTime: '',
      checkboxSelect: 0,
      total1: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [] // 选中的数据
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    search(){
      this.getTableData();
    },
    getTableData() {
      // 获取列表信息
      if(this.value1){
        this.endTime = this.value1[1]
        this.startTime = this.value1[0]
      }else {
        this.endTime = ''
        this.startTime = ''
      }
      this.$http({
        url: "/api/quick/finance/manage/queryInvoiceListAndTaskNumByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          billType: 2,
          isUploadBill: this.value,
          mixedStr: this.input,
          startTime: this.startTime,
          endTime: this.endTime,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getQueryTaskByParam(item) {
      // 关联任务
      this.taskDelShow = true;
      this.$http({
        url: "/api/quick/finance/manage/queryTaskByParamGeneral",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          // "businessId": item.businessId
        },
        data: {
          businessId: item.businessId,
          billNo: item.billNo,
          pageNum: 1,
          pageSize: 100
        }
      }).then((data) => {
        if (data.code === 0) {
          this.queryTaskByParam = data.result.list;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData();
    },
    handleSelectionChange() {},
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.billdwonload = d;
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    openUrl(url) {
      // 打开新窗口查看协议
      let newwin = window.open();
      newwin.document.write("<img src=" + url + " />");
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == 'billedBody') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData();
    }
  },
};
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0;
}
.cardTits .el-table .editor .el-button--text {
    margin-left: 0;
}
</style>
